<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog"
  >
    <el-descriptions
      v-loading="loading"
      class="margin-top"
      :column="itemSpan"
      :size="'large'"
      border
    >
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">流水号</div>
        </template>
        {{ dataInfo.serialNumber }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">项目名称</div>
        </template>
        {{ dataInfo.prjName }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">项目编号</div>
        </template>
        {{ dataInfo.prjNum }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">银行流水号</div>
        </template>
        {{ dataInfo.bankSerialNumber }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">收支类型</div>
        </template>
        {{ dataInfo.incomeTypeName }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">交易类型</div>
        </template>
        {{ dataInfo.tradeTypeName }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">账户名称</div>
        </template>
        {{ dataInfo.accountName }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">银行账户</div>
        </template>
        {{ dataInfo.bankNo }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">对方户名</div>
        </template>
        {{ dataInfo.oppositeName }}
      </el-descriptions-item>

      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">对方账户</div>
        </template>
        {{ dataInfo.oppositeAccount }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">收支金额</div>
        </template>
        {{ dataInfo.amount }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">账户余额</div>
        </template>
        {{ dataInfo.balance }}
      </el-descriptions-item>
      <el-descriptions-item label-align="right">
        <template #label>
          <div class="cell-item">收支日期</div>
        </template>
        {{ dataInfo.createTime }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { getDicts } from "@/store/modules/dict";
import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const itemSpan = ref(2);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 1;
  } else {
    screenWidth.value = 900;
    itemSpan.value = 2;
  }
}

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "专户详情信息",
      footBtn: "",
      id: 0,
    }),
  },
  data: {
    type: Object,
    default: () => null,
  },
});

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
let visible = ref(props.dialogDetail.visible);
const dataInfo = ref(props.data);

onMounted(async () => {
  initScreen();
});

/* 发送当前弹窗关闭 */
function sendClose() {
  emit("sendClose", "detail", false);
}

/**
 * 关闭弹窗
 */
function closeDialog() {
  visible.value = false;
  sendClose();
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 50px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 200px;
}

:deep(.el-input__wrapper) {
  width: 200px;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
.cell-item {
  font-size: 15px;
  color: #938d8d;
}
</style>
